<template>
	<view class="home">
		<view class="bg-1a padding-40 radius-40 flex align-center" style="height: 234rpx;">
			<view class="headimg position-relative">
				<image :src="men.avatar?men.avatar:'/static/board/head.png'" mode="" class="headimg"></image>
				<image src="/static/board/g-nv.png" mode="" class="genimg" v-if="men.gender==0"></image>
				<image src="/static/board/g-nan.png" mode="" class="genimg" v-if="men.gender==1"></image>
			</view>
			<view class="flex-one margin-lr-15">
				<view class="text-32 text-bold text-ff">{{men.nickname?men.nickname:'登录/注册'}}</view>
				<view class="flex align-center margin-top-10">
					<image src="/static/board/yaoff.png" mode="" class="yaoff"></image>
					<view class="text-28 margin-left-10 text-ff">{{men.level_name}}</view>
					<view class="text-28 text-be margin-left-20" @click="go('/pages/board/member')">查看权益 <text
							class="tyIcon-arrow-right text-24 text-77"></text></view>
				</view>
			</view>
			<image @click="go('/pages/board/personalCenter')" src="/static/board/set.png" mode="" class="setimg">
			</image>
		</view>
		<view class="margin-top-40 padding-30 bg-f5 radius-40">
			<view class="flex align-center">
				<view class="text-32 text-bold">我的余额</view>
				<view class="text-32 text-bold margin-left-30">￥{{men.money}}</view>
			</view>
			<view class="flex align-center margin-top-25 justify-between">
				<view @click="go('/pages/board/memberpay')" class="czbtn">充值</view>
				<view @click="go('/pages/board/detailedRecords')" class="jlbtn">明细记录</view>
			</view>

		</view>
		<view class="margin-top-40 padding-30 bg-f5 radius-40">
			<view class="flex align-center">
				<view class="flex-one">
					<view class="text-32 text-bold">我的月卡</view>
					<view class="text-28 margin-top-20">剩余畅玩数:{{men.month_card}}次。</view>
				</view>
				<view class="buybtn" @click="go('/pages/board/memberpay',2)">购买</view>
			</view>
			<view class="text-28">有限期截止到{{men.month_card_time}}</view>
		</view>
		<view class="flex align-center margin-top-40 justify-between">
			<view class="bg-ff bg-shadow width-330 padding-left-20 padding-tb-30 radius-40 flex align-center"
				@click="go('/pages/board/myorder')">
				<image src="/static/board/my1.png" mode="" class="orderimg"></image>
				<view class="flex-one margin-left-20">
					<view class="text-32 text-bold">桌游订单</view>
					<view class="text-24 text-66">Board game order</view>
				</view>
			</view>
			<view class="bg-ff bg-shadow width-330 padding-lr-20 padding-tb-30 radius-40 flex align-center"
				@click="go('/pages/order/orderList')">
				<image src="/static/board/my2.png" mode="" class="orderimg"></image>
				<view class="flex-one margin-left-20">
					<view class="text-32 text-bold">商城订单</view>
					<view class="text-24 text-66">Mall orders</view>
				</view>
			</view>
		</view>
		<view class="bg-ff bg-shadow margin-top-40 radius-40 padding-30">
			<view class="flex justify-between">
				<view class="flex align-center flex-direction" @click="go('/pages/board/activitylist?type=1')">
					<image src="/static/board/myg1.png" mode="" class="mygimg"></image>
					<view class="text-24 margin-top-10">报名的活动</view>
				</view>
				<view @click="go('/pages/board/customerService')" class="flex align-center flex-direction">
					<image src="/static/board/myg2.png" mode="" class="mygimg"></image>
					<view class="text-24 margin-top-10">联系客服</view>
				</view>
				<view class="flex align-center flex-direction" @click="go('/pages/my/aboutus')">
					<image src="/static/board/myg3.png" mode="" class="mygimg"></image>
					<view class="text-24 margin-top-10">关于我们</view>
				</view>
				<view @click="go('/pages/board/feedback')" class="flex align-center flex-direction">
					<image src="/static/board/myg4.png" mode="" class="mygimg"></image>
					<view class="text-24 margin-top-10">意见反馈</view>
				</view>
			</view>
			<view class="flex margin-top-15">
				<view class="flex align-center flex-direction margin-left-15">
					<image src="/static/board/myg5.png" mode="" class="mygimg"></image>
					<view @click="tologin" class="text-24 margin-top-10">退出登录</view>
				</view>
			</view>
		</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="phonebtn" v-if="isauthen"></button>
		<ty-tab-bar :tabnumber="'4'"></ty-tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				men: "",
				isauthen: false,
			}
		},
		onShow() {
			if (uni.getStorageSync('iv')) {
				this.isauthen = false
				this.rq.getData('Wechat/user_info').then(res => {
					this.men = res.data
				})
			} else {
				this.isauthen = true
			}

		},
		methods: {
			tologin() {
				uni.removeStorageSync('token');
				uni.removeStorageSync('iv');
				uni.redirectTo({
					url: '/pages/board/index'
				})
			},
			//手机号授权
			getPhoneNumber(e) {
				console.log(e)
				var that = this
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'alipay',
						scopes: ['auth_base'],
						success: function(loginRes) {
							console.log(loginRes)
							that.rq.getData('wechat/login', {
								encryptedData: e.detail.encryptedData,
								code: loginRes.code,
								iv: e.detail.iv,
							}).then((res) => {
								if (res.code == 1) {
									that.isauthen = false
									uni.setStorageSync('iv', true)
									uni.setStorageSync('token', res.data.token)
									that.rq.getData('Wechat/user_info').then(res => {
										that.men = res.data
									})
								}
							})
						}
					})

				}
			},
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx 288rpx;
	}

	.headimg {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
	}

	.genimg {
		width: 32.23rpx;
		height: 32.23rpx;
		position: absolute;
		right: -8rpx;
		top: 0rpx;
	}

	.yaoff {
		width: 36rpx;
		height: 32rpx;
	}

	.setimg {
		width: 43.98rpx;
		height: 41.56rpx;
	}

	.czbtn {
		width: 300rpx;
		height: 80rpx;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #999999;
		font-size: 24rpx;
		color: #101010;
		line-height: 80rpx;
		text-align: center;
	}

	.jlbtn {
		width: 300rpx;
		height: 80rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
	}

	.buybtn {
		width: 174rpx;
		height: 80rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
	}

	.orderimg {
		width: 63rpx;
		height: 63rpx;
	}

	.width-330 {
		width: 330rpx;
	}

	.mygimg {
		width: 56rpx;
		height: 56rpx;
	}
	.phonebtn {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
</style>